import React, {Component, PureComponent } from 'react'
import {ScrollView, StatusBar, StyleSheet, View, Text} from 'react-native'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import {connect} from 'react-redux'
import moment from 'moment'
import Spinner from 'react-native-loading-spinner-overlay'
import { PullView } from '../../widgets'
import { createAction, NavigationActions } from '../../utils'
import TimeChooser from './TimeChooser'
import screen from '../../utils/screen'
import color from '../../utils/color'
import SunYi from './SunYi'
import TzYc from './TzYc'

@connect(({ forecast, loading }) => ({ ...forecast, isLoading: loading.models.forecast }))
export default class extends Component {
  static navigationOptions = {
    title: '预测',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
  }

  constructor(props) {
    super(props)
    this.state = {
      position: 0,
      mainTime: {
        startTime: moment().add(1, 'year').format("YYYY"),
        endTime: moment().add(5, 'year').format("YYYY")
      }
    }
  }

  render() {
    const {  isLoading } = this.props
    const { mainTime} = this.state
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor={color.theme} />
        <Spinner visible={isLoading} />
        {
          this.state.position < 0.5 && (
            <TimeChooser extra="单位：万元" initTime={mainTime} changeDate={(s, e) => {
              this.setState({
                mainTime: {
                  startTime: s,
                  endTime: e
                }
              })
            }}/>
          )
        }
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <DefaultTabBar />}
          onScroll={(postion) => {
            this.setState({
              position: postion
            })
          }}
        >
          <View style={{flex: 1}} tabLabel="损益表预测">
            <SunYi navigation={this.props.navigation} mainTime={this.state.mainTime}/>
          </View>
          <View style={{flex: 1}} tabLabel="投资预测">
            <TzYc navigation={this.props.navigation} mainTime={this.state.mainTime}/>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})
